<template>
  <view class="feedbackContainer">
    <!-- 搜索 -->
    <view class="search">
      <uni-search-bar @confirm="searchClick" v-model="searchValue" @clear="clearClick"
        placeholder="请输入需要搜索的快递单号">
      </uni-search-bar>
    </view>
    <!-- 反馈信息区 -->
    <view class="feedbackInformation">
      <view class="feedbackCard" v-for="item in feedbackQuestion">
        <view class="first">反馈快递单号：{{ item.questionNumber }}</view>
        <view class="third">反馈信息： {{ item.answerContent == null || item.answerContent == '' ? '暂无反馈': item.answerContent }}</view>
        <view class="tag">
          <uni-tag :inverted="true" :type="item.questionIdentify == '1'? 'success': 'primary'"
            :text="item.questionIdentify == '1'? '已回复': '未回复'" />
        </view>

      </view>
      <!-- 悬浮按钮 -->
      <uni-fab horizontal="right" vertical="bottom" :pattern="pattern" @fabClick="addFeedback"></uni-fab>
    </view>

  </view>
</template>

<script>
  export default {
    onShow() {
      this.searchValue = '';
      this.feedbackQuestion = [];
      this.getFeedbackData();
    },
    // 下拉刷新动作
    onPullDownRefresh() {
      this.searchValue = '';
      this.feedbackQuestion = [];
      this.getFeedbackData();
      uni.stopPullDownRefresh();
    },
    // 导致数据翻倍
    // onTabItemTap(){
    //   this.searchValue = '';
    //   this.feedbackQuestion = [];
    //   this.getFeedbackData();
    // },
    data() {
      return {
        searchValue:'',
        feedbackQuestion: [],
        pattern: {
          backgroundColor: '#fe84b4',
          selectedColor: '#fe84b4',
          buttonColor: '#fe84b4',
          iconColor: '#fff'
        },
      }
    },
    methods: {
      clearClick(){
        this.searchValue = '';
        this.feedbackQuestion = [];
        this.getFeedbackData();
      },
      searchClick(){
        this.feedbackQuestion = [];
        this.getFeedbackData();
      },
      // 获取当前id下的返回信息
      getFeedbackData(){
        uni.showLoading({
          title: '加载中...'
        })
        this.$http.get('/api/feedbackQuestion/getFeedbackDataForUser',{
          query: this.searchValue
        }).then((res) => {
          if(res.data.code != 200){
            uni.showToast({
              title: '数据加载错误，请稍后重试',
              icon: 'none',
              duration: 2000
            })
          }else {
            for (var i = 0; i < res.data.data.length; i++) {
              var item = {};
              item = res.data.data[i];
              this.feedbackQuestion.push(item);
            }
            console.log(this.feedbackQuestion);
          }
          uni.hideLoading();
        });
      }, 
      addFeedback(){
        uni.navigateTo({
          url:'/pages/function/feedback/AddFeedback?'+ this.feedbackQuestion[0].userId
        })
      }
    }
  }
</script>

<style>
  view {
    font-size: 13px;
  }
  
  .search {
    position: fixed;
    width: 100%;
    height: 120rpx;
    background-color: #ffffff;
    z-index: 999;
  }

  .feedbackContainer {
    height: 100%;
  }

  .feedbackInformation {
    height: 100%;
    background-color: #f8f8f8;
    padding: 30rpx;
    padding-top: 150rpx;
    margin: 0 auto;
  }

  .feedbackContainer .feedbackInformation .feedbackCard {
    position: relative;
    margin-bottom: 30rpx;
    width: 90%;
    height: 180rpx;
    /* border: 1px solid black; */
    padding: 30rpx;
    border-radius: 30rpx;
    background-color: #ffffff;
    box-shadow:
      0px 0px 3.7px rgba(0, 0, 0, 0.006),
      0px 0px 8.9px rgba(0, 0, 0, 0.008),
      0px 0px 16.8px rgba(0, 0, 0, 0.01),
      0px 0px 29.9px rgba(0, 0, 0, 0.012),
      0px 0px 56px rgba(0, 0, 0, 0.014),
      0px 0px 134px rgba(0, 0, 0, 0.02);
  }

  .feedbackContainer .feedbackInformation .feedbackCard .tag,
  .feedbackContainer .feedbackInformation .feedbackCard .third,
  .feedbackContainer .feedbackInformation .feedbackCard .first {
    margin-bottom: 20rpx;
  }

  .feedbackContainer .feedbackInformation .feedbackCard .first {
    font-size: 16px;
    font-weight: 1000;
    padding-left: 20rpx;
  }

  .feedbackContainer .feedbackInformation .feedbackCard .tag {
    padding-left: 20rpx;
  }

  .feedbackContainer .feedbackInformation .feedbackCard .third {
    font-size: 13px;
    padding-left: 20rpx;
    color: #a3a3a3;
    word-wrap: break-word;
  }

  .feedbackContainer .feedbackInformation .feedbackCard .tag .uni-tag {
    margin-right: 20rpx;
  }

  .feedbackContainer .feedbackInformation .feedbackCard .signBtn {
    position: absolute;
    right: 5%;
    top: 35%;
    margin-bottom: 0rpx;
  }
</style>
